import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet
} from 'react-native';

import {
    Press,
    Dialog,
    FastImage
} from './../../../components';

import {
    Profile
} from './../../../types/types'

import {
    Actions
} from 'react-native-router-flux';

interface Props {
    data:Profile,
    onLikePress:Function
}

import Label from './label';

import More from './../components/more';

import * as Const from './../../../const';

import parseUrl from "../../../utils/parseUrl";
import more_icon from './../../../images/more.png';

import like_icon from './../../../images/home/liked_icon.png';
import unlike_icon from './../../../images/home/unlike_icon.png';
import message_icon from './../../../images/home/message.png';


class BrowseItem extends PureComponent <Props>{

    static defaultProps = {
        data:{},
        onLikePress:() => null
    }

    get Data() {
        const {
            data
        } = this.props;
        return data || {};
    }

    get age() {
        const {
            age
        } = this.Data;
        return age||19
    }

    get genderId() {
        const {
            gender
        } = this.Data;
        const {
            id = 0
        } = gender || {};
        return id;
    }

    get userName() {
        const {
            userName
        } = this.Data;
        return userName;
    }

    get avatarUrl() {
        const {
            avatorUrl
        } = this.Data;
        return parseUrl(avatorUrl,true);
    }

    get userId() {
        const {
            userId
        } = this.Data;
        return userId;
    }

    get isLike() {
        const {
            isLiked
        } = this.Data;
        return !!isLiked;
    }

    get likeIcon() {
        return this.isLike? like_icon: unlike_icon;
    }

    private onLikePress = () => {
        const {
            onLikePress
        } = this.props;
        onLikePress(this.userId,!this.isLike)
    }

    private onOpenMore = () => {
        const content = (
            <More userId={this.userId}/>
        )
        Dialog.show(content,{
            maskOpacity:.6,
            clickClose:true,
            direction:`bottom`
        })
    }

    public toMessage = () => {
        Actions.push(`/message`,{
            userId:this.userId,
            nickName:this.userName
        })
    }

    private toProfile = () => {
        Actions.push(`/profile/:userId`,{
            userId:this.userId
        })
    }

    render() {
        return (
            <Press
                style={styles.container}
                onPress={this.toProfile}
            >
                <View style={styles.header}>
                    <View style={styles.headerLeft}>
                        <Text style={styles.userName}>
                            {this.userName}
                         </Text>
                        <Label
                            age={this.age}
                            gender={this.genderId}
                        />
                    </View>
                    <Press
                        style={styles.moreButton}
                        onPress={this.onOpenMore}
                    >
                        <Image source={more_icon}/>
                    </Press>
                </View>
                <FastImage
                    enableLazy={false}
                    url={this.avatarUrl}
                    style={styles.avatar}
                />
                <View style={styles.footer}>
                    <Press
                        style={styles.item}
                        onPress={this.onLikePress}
                        children={<Image source={this.likeIcon} />}
                    />
                    <View style={styles.line} />
                    <Press style={styles.item} onPress={this.toMessage}>
                        <Image source={message_icon}/>
                    </Press>
                </View>
            </Press>
        )
    }
}

export default BrowseItem;


const styles = StyleSheet.create({
    container:{
        height:420,
        borderRadius:8,
        paddingHorizontal:12,
        backgroundColor:`#323541`
    },
    header:{
        height:48,
        alignItems:`center`,
        flexDirection:`row`,
        justifyContent:`space-between`
    },
    userName:{
        fontSize:14,
        color:`#fff`,
        marginRight:12,
        fontFamily:Const.fontFamily
    },
    headerLeft:{
        alignItems:`center`,
        flexDirection:`row`
    },
    moreButton:{
        height:`100%`,
        paddingLeft:20,
        justifyContent:`center`
    },
    avatar:{
        flex:1,
        borderRadius:4
    },
    footer:{
        height:60,
        alignItems:`center`,
        flexDirection:`row`
    },
    item:{
        flex:1,
        height:`100%`,
        alignItems:`center`,
        justifyContent:`center`
    },
    line:{
        width:1,
        height:`60%`,
        backgroundColor:`#61677C`
    }
}) as any;